<template>
	<view>
		<view class="xian"></view>
		<view class="sousuoany">搜索 {{container}}</view>
		<view class="sousuoconatiner" v-for="item in songs" :key="item.id" @click="jilv(item.name,item.id)">
			<uni-icons class="sousuo" type="search"size="20"></uni-icons>
			<text>{{item.name}}</text>
			<text style="margin-left: 10rpx;margin-right: 10rpx;">-</text>
			<view class="artist">{{item.artists[0].name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['container','songs'],
		data() {
			return {
				
			}
		},
		methods:{
			jilv(name,id){
				this.$emit('jilv',name,id)
			}
		}
	}
</script>

<style lang="scss">
	.xian{
		width: 100%;
		height: 2rpx;
		background-color: #e6e6e6;
	}
	.sousuoany{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;    
		width: 85%;
		margin-top: 20rpx;
		height: 20px;
		margin-left: 56rpx;
		margin-right: 56rpx;
		font-size: 32rpx;
		color: blue;
	}
	.sousuoconatiner{
		width: 80%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		margin-right: 56rpx;
		font-size: 32rpx;
		text{
			font-size: 32rpx;
			margin-left: 20rpx;
			color: grey;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-break: normal; 
		}
		.artist{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-break: normal; 
		}
	}
</style>
